<template>
  <div class="tbc-flex-col" style="justify-content: center" :style="outerStyle">
    <div class="tbc-flex-col" style="justify-content: center;" :style="containerStyle">
      <div class="tbc-flex-row" >
        <div class="tbc-flex-row"
             style="position: relative;padding-left: 15px;padding-right: 15px;flex-direction: row;flex-shrink: 0"
             v-for="(item, index) in keywords" :key="index">
          <span style="font-size: 12px;color: #fff;">{{ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      outerStyle: '',
      containerStyle: '',
      fontStyle: '',
      module: {
        config: {
          outer: {},
          container: {},
        },
        data: []
      },
    }
  },
  computed: {
    keywords() {
      let list = this.module.data
      let keywords = []
      list.forEach(item => keywords.push(item.text))
      return keywords.join('、').split('、')
    }
  },

  methods: {
    // 初始化
    init(module) {
      this.module = module
      this.setOuterStyle()
      this.setContainerStyle()
    },

    // 设置外层容器样式
    setOuterStyle() {
      let style = []
      let config = this.module.config.outer || {}
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.background) style.push('background:' + config.background)
      this.outerStyle = style.join(';')
    },

    // 内层容器样式
    setContainerStyle() {
      let style = []
      let config = this.module.config.container || {}
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      this.containerStyle = style.join(';')
    },
  }
}
</script>